import React, { Component, useRef } from 'react'
import { Form, Input, DatePicker, Space, Button } from 'antd'
import { SearchOutlined } from "@ant-design/icons";
import _ from 'lodash'
import { getDateTime3 } from '@/utils/getDate'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import { apiOrderPetOrderPage } from '@/request/orderManagement'
import TheButton from "@/components/TheButton";
import { exportSheetTable } from '@/utils/exportTable.js'

const { RangePicker } = DatePicker

const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
      delete (values.time)
    }
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      orderCode: '',
      time: []
    })
    getValue({})
  }
  return <Form layout={'inline'} onFinish={onFinish} ref={formRef}>
    <Form.Item name='orderCode'>
      <Input suffix={<SearchOutlined />} placeholder="订单编号" />
    </Form.Item>
    <Form.Item name='time' label="订单时间">
      <RangePicker />
    </Form.Item>
    <Form.Item>
      <Space>
        <Button type='primary' htmlType='submit'>搜索</Button>
        <Button onClick={reset}>重置</Button>
      </Space>
    </Form.Item>
  </Form>
}

export default class PetOrder extends Component {
  state = {
    columns: [
      {
        title: '订单编号',
        dataIndex: 'orderCode',
        key: 'orderCode'
      },
      {
        title: '购买用户',
        dataIndex: 'orderMemberName',
        key: 'orderMemberName'
      },
      {
        title: '支付金额',
        dataIndex: 'orderPayPrice',
        key: 'orderPayPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      },
      {
        title: '支付方式',
        dataIndex: 'payWay',
        key: 'payWay',
        render: (text, record) => {
          let label = ''
          switch (text) {
            case 'WeChat':
              label = '微信';
              break;
            case 'Alipay':
              label = '支付宝';
              break;
            case 'Cash':
              label = '现金';
              break;
          }
          return label;
        }
      },
      {
        title: '订单类型',
        dataIndex: 'orderTypeName',
        key: 'orderTypeName'
      },
      {
        title: '订单时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    searchValue: {},
    loading: false
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { pageData, searchValue } = this.state
    let res = await apiOrderPetOrderPage({ ...pageData, ...searchValue })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => this.getData())
  }
  getValue = (value) => {
    this.setState({
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      searchValue: value
    }, () => this.getData())
  }

  exportAll = async () => {
    const { searchValue, } = this.state
    let res = await apiOrderPetOrderPage({ ...searchValue, pageNo: 1, pageSize: 100, type: "Y", })
    if (res.code === 0 && res.data) {
      console.log(res.data);
      const th_arr = [
        {
          title: '增值服务订单列表',
          prop: '',
          children: [
            {
              title: '订单编号',
              prop: 'orderCode',
            },
            {
              title: '购买用户',
              prop: 'orderMemberName',
            },
            {
              title: '支付金额',
              prop: 'orderPayPrice',
              valueType: 'number'
            },
            {
              title: '支付方式',
              prop: 'payWay',
            },
            {
              title: '订单类型',
              prop: 'orderTypeName',
            },
            {
              title: '订单时间',
              prop: 'createTime',
            },

          ]
        },

      ]
      let tb_arr = []
      res.data.forEach(item => {
        tb_arr.push({
          orderCode: item.orderCode || '/',
          orderMemberName: item.orderMemberName || '/',
          orderPayPrice: Number(item.orderPayPrice / 100).toFixed(2) || '/',
          payWay: item.payWay === "Alipay" ? "支付宝" : item.payWay === "WeChat" ? "微信" : item.payWay === "UnionPay" ? "银联" : item.payWay === "YsPay" ? "银行卡" : '/',
          orderTypeName: item.orderTypeName || '/',
          createTime: item.createTime || '/',
        })
      })
      exportSheetTable({ fileName: `增值服务订单`, tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: false, })
    }
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, loading } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getValue={this.getValue} />
        <div style={{ marginTop: "10px" }}>
          <TheButton
            haspermi={['petorder:list:export']}
            type="default"
            size="middle"
            onClick={() => this.exportAll()}
          >
            导出全部
          </TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} scroll={{ x: 'max-content', y: '63vh' }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
